<<template>
  <v-container class='holder'>
    <el-row style='min-height:200px' :gutter='40'>
      <el-col :span='4'>
        <admin-menu></admin-menu>
      </el-col>
      <el-col :span='20'>
        <div class=' panel panel-default' style='width:250px;margin:auto;'  v-loading="loading">
          <div class='panel-heading'>
            关键字编辑
          </div>
          <div class='panel-body'>
            
            <el-autocomplete class='input'
              v-model='keyword.value'
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect">
            </el-autocomplete>
            <el-select v-model="keyword.type" placeholder="请选择" class='input'>
              <el-option label="普通"  :value="0"></el-option>
              <el-option label="首页展示"  :value="1"></el-option>
            </el-select>
            <el-input class='input' v-model.number="keyword.order" type="number" placeholder="输入排序"></el-input>
            <el-button class='input' type="success" @click='submitKeyword'>提交</el-button>
          </div>
        </div>
          
      </el-col>
    </el-row>
  </v-container>
  
</template>
<<script>
import AdminMenu from '@/components/AdminMenu'
export default {
  data() {
      return {
        keyword:{
          id:0,
          url:'',
          value:'',
          type:0,
          order:0
        },
        results:null,
        timeout:  null,
        loading:false
      };
    },
  components:{
    AdminMenu:AdminMenu
  },
  methods:{
    loadBasic(params) {
      
    },
    querySearchAsync(queryString, cb) {
      var vm=this
      var hasWord=queryString==undefined||queryString.length>0
      var url=hasWord?"/api/getKeywords/"+queryString:"/api/basicKeyList"
      var param=hasWord?{
        method:  'POST',
        headers: {
                'Content-Type': 'application/json'
          },
        mode: 'cors',
        body: JSON.stringify({
                name: admin.name,
                session: admin.session,
          })
        }:{
        method:  'GET',
        headers: {
                'Content-Type': 'application/json'
          },
        mode: 'cors'
        }
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
      fetch(url, param).then((response)=> {
          return response.json()
        }).then((json)=>{
          if(json.data!=null){
            cb(json.data)
          }else{
          cb([])
          }
        })
      }, 900);
    },
    handleSelect(item) {
        this.keyword=item
    },
    submitKeyword(){
      this.loading=true
      var vm=this
      var url='/api/saveKeyword'
      var data={
                name: admin.name,
                session: admin.session,
                id:this.keyword.id,
                url:this.keyword.url,
                value:this.keyword.value,
                type:this.keyword.type,
                order:this.keyword.order
          }
          logger.log(JSON.stringify(data))
      fetch(url, {
        method: 'POST',
        headers: {
                'Content-Type': 'application/json'
          },
        mode: 'cors',
        body: JSON.stringify(data)
        }).then(function(response) {
          try {
               return response.json()
          } catch (error) {
            logger.log("error:",error)
          }
        }).then(function(json) {
          logger.log(json)
          vm.loading=false
          var result=false
          if(json&&json.code==0){
            result=true
          }else{
            result=false
          }
          vm.$message({
          message: result?'保存成功':'保存失败',
          type: result?'success':'error'});
        })
    }
  }
}
</script>
<style scoped>
.input {
  margin-bottom: 12px;
  width: 100%;
}
</style>